<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";
import Player from "xgplayer";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);

import "xgplayer/dist/index.min.css";



const custom_list = ref([
    {
      id: "1",
      title: '曼谷暹罗安纳塔拉酒店 | 打造安全顺畅的数字支付体验',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "2",
      title: 'GERALD.ph | 为美食家提供更顺畅的支付体验',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "3",
      title: 'Joey Mattress | 优质收款服务成就每晚甜美梦乡',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "4",
      title: 'BEST | 为菲律宾超级App提供顺畅且可扩展的支付解决方案',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "5",
      title: 'USANA | 为金融服务匮乏区域提供便捷支付路径',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "6",
      title: 'MSIG Insurance | 助力领先的保险巨头MSIG顺应数字化趋势',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
 ])
const industry_list = ref([
    {
      id: "1",
      title: '亚洲地区购买与支付趋势洞察， 2023年：把握新商机',
      subTitle: '2024年03月30日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "2",
      title: '《Antom 中国美妆出海洞察报告》',
      subTitle: '2024年03月27日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "3",
      title: '《Antom 中国服装出海洞察报告》',
      subTitle: '2024年03月11日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "4",
      title: '《Antom 影音娱乐出海洞察报告》',
      subTitle: '2024年04月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "5",
      title: '《出海变局下的支付突围-跨境电商数字支付报告》',
      subTitle: '2024年03月11日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "6",
      title: 'MSIG Insurance | 助力领先的保险巨头MSIG顺应数字化趋势',
      subTitle: '2024年02月05日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
 ])
const expert_list = ref([
    {
      id: "1",
      title: 'Payments Powerhouses：引领菲律宾的数字支付转型征程',
      subTitle: '2024年09月05日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "2",
      title: '数字支付与创新驱动东南亚体验经济蓬勃发展',
      subTitle: '2024年09月05日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "3",
      title: 'Payments Powerhouses：后疫情时代菲律宾的数字支付转型之路',
      subTitle: '2024年08月12日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "4",
      title: 'Payments Powerhouses：加快东盟金融科技行业的前进步伐',
      subTitle: '2024年08月12日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "5",
      title: '保险公司加速成长的数字化转型之路',
      subTitle: '2024年08月12日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "6",
      title: '印尼数字支付转型的深度剖析',
      subTitle: '2024年07月23日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
 ])
const sea_list = ref([
    {
      id: "1",
      title: '出海问不倒 -Antom风控产品Q&A【上】',
      subTitle: '2024年05月29日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "2",
      title: '出海问不倒 - Antom风控产品Q&A【中】',
      subTitle: '2024年05月28日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    },
    { 
      id: "3",
      title: '出海问不倒 - Antom风控产品Q&A【下】',
      subTitle: '2024年06月26日',
      src: 'https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*A4rNS7II9SMAAAAAAAAAAAAADmesAQ/original'
    }
 ])

/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <!-- 主图-->
    <v-sheet color="#001966" class="pt-[72px] h-[318px]">
      <div class="mx-auto d-flex align-center w-9/12 h-[100%]">
          <span class="font-semibold text-5xl text-white">行业知识</span>
      </div>
    </v-sheet>
    <v-sheet class="w-9/12 mx-auto mt-20 relative">
      <div class="w-9/12 pr-36 text-[20px] d-flex float-right h-[538px] rounded-[24px] bg-cover bg-[url('https://mdn.alipayobjects.com/huamei_omsogl/afts/img/A*gkaXRa2ROL0AAAAAAAAAAAAADvW4AQ/fmt.webp')]">
          <div class="w-5/12"></div>
          <div class="w-7/12 d-flex flex-column justify-center ">
            <div class="text-[#4592ff]">
              <span class="py-[12px] px-[20px] bg-[#e6f4ff] rounded-[8px]">专家解读</span>
            </div>
            <span class="text-[32px] text-[#000] font-bold my-10">Payments Powerhouses：引领菲律宾的数字支付转型征程</span>
            <span class="text-[rgba(0,0,0,.6)]">2024年09月05日</span>
          </div>
      </div>
      <div class="w-6/12 absolute rounded-bl-[32px] rounded-br-[16px] rounded-tl-[8px] rounded-tr-[8px] w-[720px] h-[405px] overflow-hidden top-[12%]">
        <v-img class="cursor-pointer transform transition-transform duration-500 hover:scale-125" cover height="100%" width="100%"  src="/assets/imgs/knowledge/1.png"></v-img>
      </div>
    </v-sheet>
    <v-sheet class="w-9/12 mx-auto mt-20">
      <div class="d-flex align-center font-bold text-4xl mb-10">
        <div>
          <v-img height="50px" width="50px" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-cate1.e4532791.svg"></v-img>
        </div>
        <span>客户案例</span>
      </div>
      <div class="d-flex flex-wrap">
          <div class="d-flex flex-column w-4/12" v-for="item in custom_list" :key="item.id">
              <div class="w-[440px] h-[220px] rounded-[16px] overflow-hidden">
                <v-img cover width="100%" height="100%" :src="item.src"></v-img>
              </div>
              <span class="pl-4 w-11/12 h-[60px] my-[20px] text-left text-[20px] font-bold text-[#000]">{{ item.title }}</span>
              <span class="pl-4 w-11/12">{{ item.subTitle }}</span>
          </div>
      </div>
    </v-sheet>
    <v-sheet class="w-9/12 mx-auto mt-20">
      <div class="d-flex align-center font-bold text-4xl mb-10">
        <div>
          <v-img height="50px" width="50px" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-cate2.bea39a4b.svg"></v-img>
        </div>
        <span>行业报告</span>
      </div>
      <div class="d-flex flex-wrap">
          <div class="d-flex flex-column w-4/12" v-for="item in industry_list" :key="item.id">
              <div class="w-[440px] h-[220px] rounded-[16px] overflow-hidden">
                <v-img cover width="100%" height="100%" :src="item.src"></v-img>
              </div>
              <span class="pl-4 w-11/12 h-[60px] my-[20px] text-left text-[20px] font-bold text-[#000]">{{ item.title }}</span>
              <span class="pl-4 w-11/12">{{ item.subTitle }}</span>
          </div>
      </div>
    </v-sheet>
    <v-sheet class="w-9/12 mx-auto mt-20">
      <div class="d-flex align-center font-bold text-4xl mb-10">
        <div>
          <v-img height="50px" width="50px" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-cate3.abb64eb7.svg"></v-img>
        </div>
        <span>专家解读</span>
      </div>
      <div class="d-flex flex-wrap">
          <div class="d-flex flex-column w-4/12" v-for="item in expert_list" :key="item.id">
              <div class="w-[440px] h-[220px] rounded-[16px] overflow-hidden">
                <v-img cover width="100%" height="100%" :src="item.src"></v-img>
              </div>
              <span class="pl-4 w-11/12 h-[60px] my-[20px] text-left text-[20px] font-bold text-[#000]">{{ item.title }}</span>
              <span class="pl-4 w-11/12">{{ item.subTitle }}</span>
          </div>
      </div>
    </v-sheet>
    <v-sheet class="w-9/12 mx-auto mt-20">
      <div class="d-flex align-center font-bold text-4xl mb-10">
        <div>
          <v-img height="50px" width="50px" src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-cate4.65cf0fbf.svg"></v-img>
        </div>
        <span>出海问不倒</span>
      </div>
      <div class="d-flex flex-wrap">
          <div class="d-flex flex-column w-4/12" v-for="item in sea_list" :key="item.id">
              <div class="w-[440px] h-[220px] rounded-[16px] overflow-hidden">
                <v-img cover width="100%" height="100%" :src="item.src"></v-img>
              </div>
              <span class="pl-4 w-11/12 h-[60px] my-[20px] text-left text-[20px] font-bold text-[#000]">{{ item.title }}</span>
              <span class="pl-4 w-11/12">{{ item.subTitle }}</span>
          </div>
      </div>
    </v-sheet>


    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>
    :deep(.v-img.v-responsive) {
        @apply cursor-pointer transform transition-transform duration-500 hover:scale-125;
    }
</style>